/* eslint-disable */
<template>
  <div class="PieEcharts" :ref="MyPieEcharts"></div>
</template>

<script>
import option from "./option";
export default {
  name: "PieEcharts",
  props: {
    pChartsOption: {
      type: Object,
      default () {
        return {};
      }
    },
    isloop: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      MyPieEcharts: `$piecharts${new Date().getTime()}`,
      // echart配置
      chartsOption: {}
    };
  },
  watch: {
    chartsOption: {
      deep: true,
      handler (n, o) {
        this.initCharts();
      }
    },
    pChartsOption: {
      deep: true,
      handler (n, o) {
        this.DisposeOption();
      }
    }
  },
  methods: {
    initCharts () {
      this.$echarts
        .init(this.$refs[this.MyPieEcharts])
        .setOption(this.chartsOption);
    },
    DisposeOption () {
      let output = null;
      let obj = this.pChartsOption;

      if (this.isloop) {
        // 圆环饼图
        output = JSON.parse(JSON.stringify(option.loop));
        let series = output.series[0];
        series.data.push({
          value: obj.value,
          itemStyle: {
            color: obj.color ? obj.color : "#ED7D31"
          }
        });
        series.data.push({
          value: 100 - obj.value,
          label: {
            show: false
          },
          itemStyle: {
            color: "#EBE9F4"
          }
        });

        // 是否需要显示label标签
        if (obj.needlabel === false) {series.label.show = false;}

        // 是否需要更换显示字段
        if (obj.labelformatter) {series.label.formatter = obj.labelformatter;}

        // 是否需要调整饼图大小
        if (obj.radius) {series.radius = obj.radius;}

      } else {
        // 实心饼图
        output = JSON.parse(JSON.stringify(option.circle));

        // 添加饼图数据
        let series = output.series[0];
        if (obj.data && obj.data.length > 0) {
          obj.data.forEach(item => {
            series.data.push({
              value: item.value,
              name: item.name,
              itemStyle: {
                color: item.color ? item.color : ""
              }
            });
          });
        }

        // 是否需要显示label标签
        if (obj.needlabel === false) {series.label.show = false;}

        // 是否需要更换显示字段
        if (obj.labelformatter) {series.label.formatter = obj.labelformatter;}

        // 是否需要调整饼图大小
        if (obj.radius) {series.radius = obj.radius;}
      }

      // 添加配置渲染Echarts
      this.chartsOption = output;
    }
  }
};
</script>

<style lang='less'>
.PieEcharts{
  height: 100%;
}
</style>